<template>
  <div class="cycle-box">

    <!--    选择-->
    <div class="select-bill-time">
      <div class="time-picker time-picker-2">
        <van-field
            v-model="emailValue"
            label="借记卡号"
            clearable
            placeholder="请输入借记卡号"
            right-icon="camera-o"
            @click-right-icon="getCamera"
            input-align="right"
        />
      </div>

    </div>
    <!--    头部-->
    <div class="bank-card-box">
      <div class="item">
        <span class="span-text">持卡人姓名</span>
        <p class="text-gray">陈**</p>
      </div>
    </div>
    <!--    温馨提示-->
    <div class="tips">

      <div class="button">提交</div>
    </div>
    <van-popup
        v-model="billSelect"
        closeable
        close-icon-position="top-left"
        position="bottom"
        :style="{ 'min-height': '17%' }">
      <div class="amount-list">
        <h3>周期选择</h3>
        <div class="cycle-list">
          <p class="cycle-time">2021年</p>
          <p class="time" v-for="(item,index) in 3" :key="index">
            <span>{{ `${index + 1}月账单` }}</span>
            <span>2021/02/20-2021/03/19</span>
          </p>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "billCycle",
  data() {
    return {
      billSelect: false,
      emailValue: ''
    }
  },
  methods:{
    getCamera(){
      console.log('调起相机')
    }
  }
}
</script>

<style lang="stylus" scoped>
/deep/.van-icon-camera-o
  display flex
  align-items center
  justify-content center
  width 36px
  height 36px
  background url('../assets/icon/camera.png') no-repeat center
  background-size contain
/deep/ .van-cell
  padding 0
  color #333333
  font-size 32px

.cycle-box
  display flex
  width 100%
  flex-direction column
  background #F7F7F7
  min-height 100vh
  color #333

  .bank-card-box
    position relative
    z-index 1000
    background #fff

    .item
      display flex
      align-items center
      margin 0 27px 0 33px
      height 90px
      color #333333
      border-bottom 2px solid #efefef
      .span-text
        //padding 0 16px
        flex 1

        &.active
          color #07B7A0

  .card-right__logo
    width 48px
    height 48px
    display flex
    justify-content center
    margin-left 16px

    img
      width 100%
      height 100%

    .img2
      width 22px
      height 16px

  .select-bill-time
    background #fff
    display flex
    flex-direction column
    justify-content center

    .time-picker
      display flex
      align-items center
      justify-content space-between
      height 90px
      margin-left 30px
      padding-right 30px
      border-bottom 2px solid #E6E6E6

      .right-1
        display flex

        .line
          display flex
          width 44px
          align-items center
          margin 16px 0
          color #969799
          font-size 14px
          line-height 24px
          border-color #ebedf0
          border-style solid
          border-width 0
          padding 0 20px

          &:after
            content ''
            display block
            -webkit-box-flex: 1
            -webkit-flex: 1
            flex: 1
            box-sizing: border-box
            height: 1px
            border-color: inherit
            border-style: inherit
            border-width: 1px 0 0

        .rage-1
          display flex
          align-items center
          justify-content center
          height 60px
          border 1px solid #e5e5e5
          padding 0 30px
          border-radius 30px
          color #555555

          &:after
            content ''
            margin-left 10px
            width 0
            height 0
            border-left 12px solid transparent
            border-right 12px solid transparent
            border-top 20px solid #808080

    .time-picker-2
      .right-2
        border none

.bill-box
  background #fff

.amount-list
  h3
    font-weight: 400
    display flex
    align-items center
    justify-content center
    height 100px
    color #666
    border-bottom 1px solid #E6E6E6

  .cycle-list
    color #333333
    font-size 32px

    .cycle-time
      color #666

  .time
    display flex
    align-items center
    justify-content space-between
    padding-right 30px

    span
      &:last-of-type
        color #666

  p
    margin-left 32px
    border-bottom 1px solid #E6E6E6
    display flex
    align-items center
    height 90px
    color #333333
    font-size 32px
.tips
  padding 30px
  font-size 28px
  p
    &:last-of-type
      padding-bottom 30px
  .button
    display flex
    width 686px
    height 88px
    background #FFA900
    border-radius 8px
    color #fff
    font-size 36px
    align-items center
    justify-content center
    margin 30px auto
</style>
